<!--
 * @Author: zjf
 * @Date: 2023-07-17 10:44:46
 * @LastEditors: zjf
 * @LastEditTime: 2023-08-21 16:37:03
 * @Description:
-->
<template>
  <div class="map-tools">
    <div class="map-tools-item">
      <div v-if="!isFull" class="tool-item" title="全屏">
        <img class="tool-item-icon full-icon" style="width:20px" :src="`${rootUrl}img/map/tools/fullscreen-set.png`"
          alt="" @click="setFullscreen()">
      </div>
      <div v-if="isFull" class="tool-item" title="退出全屏">
        <img class="tool-item-icon full-icon" :src="`${rootUrl}img/map/tools/fullscreen-out.png`" alt=""
          @click="outFullscreen()">
      </div>
    </div>
    <div class="map-tools-item">
      <div class="tool-item" v-for="item in basemapList" :key="item.type" :class="{'is-active':item.type == basemapSel}"
        @click="handleChange(item.type)" :title="item.title">
        <img class="tool-item-icon" :class="item.type"
          :src="`${rootUrl}img/map/tools/${item.icon}${item.type == basemapSel?'_sel':''}.png`" alt="">
      </div>
    </div>
    <div class="map-tools-item">
      <div class="tool-item" v-for="item in toolList" :key="item.type" @click="handleChange(item.type)"
        :title="item.title">
        <img class="tool-item-icon" :class="item.type" :src="`${rootUrl}img/map/tools/${item.icon}.png`" alt="">
      </div>

      <div class="tool-item" @click="handleChange('pitch')" title="重置视角">
        <div v-if="!isPitch3D" class="pitch icon-3d"
          :style="`background: url('${rootUrl}img/map/tools/icon_maptool_mapstatus.png') -191px -4px / 343px;`">
        </div>
        <div v-else class="pitch icon-2d"
          :style="`background: url('${rootUrl}img/map/tools/icon_maptool_mapstatus.png') -139px -3px / 343px;`">
        </div>
      </div>
      <div class="tool-item" @click="handleChange('measure')" title="测量">
        <div class="measure" :style="`background: url('${rootUrl}img/map/tools/maptool_top.png') -108px 0px;`">
        </div>
      </div>
    </div>

    <!-- 测量 -->
    <l-dialog title="测量" class="tools-dialog" :visible.sync="measureVisible" :height="60" :width="270"
      :showMinBtn="false" :showFullscreenBtn="false" :hasBtns="false" :modal="false">
      <Measure :mapMeasure="mapMeasure" v-if="measureVisible"></Measure>
    </l-dialog>

  </div>
</template>

<script>
import unitMap from "../js/unitMap";
import Measure from "./measure.vue";
export default {
  mixins: [unitMap()],
  components: { Measure },
  props: ['mapboxmap', 'mapMeasure'],
  data() {
    return {
      basemapSel: 'vector',
      basemapList: [
        {
          type: 'reset',
          title: '重置视图',
          icon: `icon_maptool_reset`,
        },
        {
          type: 'vector',
          title: '电子底图',
          icon: `basemap_vector`,
        },
        {
          type: 'image',
          title: '影像底图',
          icon: `basemap_image`,
        },
      ],
      toolList: [
        {
          type: 'compass',
          title: '重置方位角',
          icon: `maptool_compass`,
        },
      ],

      measureVisible: false,
    };
  },
  watch: {},
  computed: {
    isPitch3D() {
      if (this.mapboxmap) {
        let pitch = this.mapboxmap.getPitch()
        if (pitch !== 0) {
          return true
        }
      }
      return false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
    },

    // 按钮点击事件
    handleChange(type) {
      if (this.basemapSel == type) {
        return
      }
      switch (type) {
        case 'reset':
          var option = this.mapConfig
          this.mapboxmap.easeTo(option);
          break;
        case 'vector':
          this.basemapSel = 'vector'
          this.mapboxmap.removeMapStyle('basemap_image')
          this.mapboxmap.removeMapStyle('basemap_image_note')
          break;
        case 'image':
          this.basemapSel = 'image'
          this.mapboxmap.removeMapStyle('basemap_vector')
          this.changeBaseMap(this.baseMap.image.url, this.baseMap.image.id);
          if (this.baseMap.note.url) {
            this.mapboxmap.loadMapStyle(this.baseMap.note.url)
              .then((styleObj) => {
                //加载地图服务
                this.mapboxmap.addMapStyle(styleObj, {
                  styleid: this.baseMap.note.id,
                  isFlyTo: false,
                  isBaseMap: false,
                });
              });
          }
          break;
        case 'pitch':
          var pitch = this.isPitch3D ? 0 : 30;
          this.mapboxmap.setPitch(pitch, { duration: 2000 });
          // this.mapboxmap.easeTo({ pitch: pitch });
          break;
        case 'compass':
          this.mapboxmap.easeTo({ bearing: 0 });
          break;
        case 'measure':
          this.measureVisible = !this.measureVisible
          break;
        default:
          break;
      }
    },

    // 更换底图
    changeBaseMap(url, id) {
      this.mapboxmap.loadMapStyle(url).then((styleObj) => {
        this.mapboxmap.addMapStyle(styleObj, {
          styleid: id,
          isFlyTo: false,
          isBaseMap: true,
        });
      });
    },



  }
};
</script>
<style lang="scss" scoped>
.map-tools {
  display: flex;
  flex-direction: column;
  &-item {
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 5px;
    .tool-item {
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &.is-active {
        background-color: #0854ce;
      }
      &:hover {
        box-shadow: inset 0 0 10px 0px #132b57ab;
      }
      &:first-child {
        border-radius: 4px 4px 0 0;
      }
      &:last-child {
        border-radius: 0 0 4px 4px;
      }
      img {
        width: 22px;
        height: 22px;
      }
      .measure {
        width: 18px;
        height: 18px;
        // background: url("/img/map/tools/maptool_top.png") -108px 0px;
      }
      .pitch {
        width: 18px;
        height: 18px;
        &.icon-2d {
          // background: url("/img/map/tools/icon_maptool_mapstatus.png") -139px -3px;
          // background-size: 343px;
        }

        &.icon-3d {
          // background: url("/img/map/tools/icon_maptool_mapstatus.png") -191px -4px;
          // background-size: 343px;
        }
      }
    }
    .tool-item + .tool-item {
      border-top: 1px solid #929292ad;
    }
  }
}
.tools-dialog {
  ::v-deep .el-dialog__header {
    height: 34px;
    .el-dialog__title {
      &::before {
        height: 17px;
        top: 3px;
      }
    }
  }
}
</style>